@import url(../ideas/tray-notifications/notification.css);

body {
  font:system;
  margin:0;
  background:#eee;
}

header { padding:0.2em; }

header > input.search {
  display:block;
  width:50vw;
  margin: 0.2em *; // center align
}

footer { 
  text-align: center;
  behavior: form; // behavaes as <form>
  line-height:1.4em;
}

input.search 
{
  height:2em;
  border:1dip solid #aaa;
  border-radius:1em;
  padding:0 2em 0 2em; 
  foreground-image:url(path:M35.525,31.228l-8.88-8.882c1.444-2.238,2.298-4.895,2.298-7.752c0-7.909-6.438-14.343-14.346-14.343
    c-7.911,0-14.343,6.434-14.343,14.343c0,7.911,6.433,14.344,14.343,14.344c2.856,0,5.513-0.849,7.752-2.294l8.88,8.88
    c0.295,0.297,0.782,0.297,1.076,0l3.22-3.221C35.824,32.008,35.824,31.523,35.525,31.228z M4.81,14.593
    c0-5.396,4.391-9.788,9.788-9.788c5.398,0,9.787,4.392,9.787,9.788c0,5.398-4.389,9.789-9.787,9.789
    C9.2,24.382,4.81,19.991,4.81,14.593z);
  foreground-repeat:no-repeat;
  foreground-size:1em;
  foreground-position-top:50%;
  foreground-position-right:0.6em;
  foreground-image-cursor: pointer;
  fill:#aaa; stroke:none; 
  background-color:#fff;
}
input.search:focus,
input.search:hover { fill:#07a; }

input.search:busy { // lookup in process indicator
  background-image: url(sciter:busy.png);
  background-repeat: no-repeat;
  background-position: 0.6em 50%;
  background-size:1em; 
}

list {
  background-color:#fff;
  display:block;
  flow:vertical;
  size:*; // spans all available space
  font: 10pt Verdana,sans-serif;
  overflow: scroll-indicator;
  border-top:1dip solid #aaa;
  border-bottom:1dip solid #aaa;
}

list > li {
  display:block;
  behavior:form; // behaves like a form
  line-height:1.6em;
  overflow-x:hidden;
  white-space:pre;
}

list > li > output(id)   { display:inline-block; width: 4em; text-align:right; }
list > li > output(text) { display:inline-block; margin-left: 1em; }
list > li > output(text) > span.found { color:red; }
